<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue/vue.js"></script>
</head>
<body>

<!--
   通过props接收到的参数  不要直接操作  如果必须要操作该参数 需要先在data中定义属性接收props中的值 然后对data中的值进行操作
-->
<div id="app">
 <change :num="1"></change>
</div>

<script>
    const  changeNum = {
        template:`
          <div>
            <h2> {{n}}</h2>
            <button @click="add">+</button>
          </div>

        `,
        data(){
            return{
               n:this.num
            }
        },
        methods:{
            add(){
                this.n++
            }
        },
        props:{
            num:{
                type:Number
            }
        }
    }
    let vm = new Vue({
        el:'#app',
        data:{},
        methods:{},
        components:{
            change:changeNum
        }
      })
</script>
</body>
</html>
